<template>
  <view class="detail-wrapper">
    <view class="background-top" />
    <view class="pay-info">
      <image src="/static/images/index/beijing.png" />
      <p>{{ salaryAmount }}</p>
      <p>实发工资(元)</p>
    </view>
    <view class="paylist">
      <view
        v-for="(item, index) in payList"
        :key="index"
        class="payitem flex"
        @click="goDetail(item)"
      >
        <view class="payitem-left">
          <p>{{ item.tableName }}</p>
          <p>{{ item.gmtCreate | formatDateAll(item.gmtCreate) }}</p>
        </view>
        <view class="payitem-right">
          {{ item.salaryReal ? item.salaryReal : "--" }}
          <image src="/static/images/right.png" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { salaryTableGroupByMonthEmpId } from "@/services/salaryBill";
import { formatDateAll } from "@/utils/tools.js";
export default {
  filters: {
    formatDateAll: formatDateAll
  },
  data() {
    return {
      payDetail: {},
      payList: [],
      salaryAmount: 0,
      isChecked: false,
      autoTime: "1天"
    };
  },

  onLoad: function(option) {
    this.companyId = uni.getStorageSync("companyId");
    this.userId = uni.getStorageSync("employeeId");
    this.getlistSalaryBills(option.year, option.month);
  },
  methods: {
    goDetail(item) {
      uni.navigateTo({
        url: "/payroll/paydetail?id=" + item.billId
      });
    },
    getlistSalaryBills(year, month) {
      var dataparams = {
        companyId: this.companyId,
        empId: this.userId,
        year: year,
        month: month
      };
      salaryTableGroupByMonthEmpId(dataparams)
        .then(res => {
          this.payList = res;
          this.salaryAmount = 0;
          this.payList.forEach(item => {
            this.salaryAmount = this.salaryAmount + item.salaryReal;
          });
          this.salaryAmount = isNaN(this.salaryAmount)
            ? "--"
            : this.salaryAmount;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    }
  }
};
</script>
<style lang="scss">
page {
  background-color: $bg-gray;
}
.background-top {
  margin-top: -20px;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 90px;
  margin-left: -20px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: $theme;
}
</style>
